body{
    margin:0;
    padding: 0;
    background-color: #f0f0f0;
}
#main-page{
    margin:0;
    padding: 0;
    
}
a { text-decoration: none; color: black;}
a:hover { color: red; }
.clr { clear: both }

#main-page { margin: 0; padding: 0; width: 100%; text-align: center; /*border: 1px #002166 solid*/ }
#page { width: 981px; background-color: white; padding: 2px; 
    border-left: 1px solid #b5b7cb; border-right: 1px solid #b5b7cb; /*border: 1px #002166 solid*/ }

/** header **/
#header .header-left { float: left; width: 100%}
#header .header-left #logo { height: 120px; float: left;}
#header .header-left #banner { float: right; }
#header .header-left .bottom-line-logo { 
    height: 4px; 
    background-color: #020ea7 
}
#header .header-right { clear: both; }
#header .header-right .space-header { height: 30px }
#header .header-right .space-header .block-profile { float: right; }
#header .header-right .space-header .block-profile ul { margin: 0; padding: 0; list-style: none; }
#header .header-right .space-header .block-profile ul li { 
    float: left; 
    padding: 0 10px;
    border-right: 1px solid #f0f0f0; 
}
#header .header-right .space-header .block-profile ul li:last-child {
    border: 0;
}
#header .header-right .main-menu {     
    background-image: url('../images/main_menu_bg.png');
    height: 33px;
    width: 100%;
}
#header .header-right .main-menu ul { 
    list-style: none; 
    color: white; 
    margin: 0 0 0 5px; 
    padding: 0 
}
#header .header-right .main-menu > ul > li { 
    padding: 5px 10px 8px 10px; 
    font-weight: bold; 
    float: left;
    margin:  0 1px;
    border-right: 1px solid #0314c8;
}
#header .header-right .main-menu ul a {
    color: white;
}
#header .header-right .main-menu > ul > li:last-child { border-right: 0 }
#header .header-right .main-menu > ul > li:hover,
#header .header-right .main-menu > ul > li.active{ 
    background-color: #4a84ca;
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
}
#header .header-right .main-menu > ul > li:hover { cursor: pointer }
#header .header-right .menu-conner { 
    float: left; 
    height: 61px; 
    width:  40px;
    background-image: url('../images/main_menu_conner.png');
}
#header .banner { position: absolute; margin-top: 69px; margin-left: 187px }

/** left **/
#page-left { float: left; width: 182px; margin-top: 7px; } 

.slice-box { text-align: left; margin-bottom: 20px; clear: both }
.slice-box > h4 { 
    height: 23px; 
    background-image: url('../images/title_box.png'); 
    margin: 0;
    padding: 3px 10px;
    color: white;
}

.slice-function ul,
.slice-customer ul{ margin: 0; padding: 0; list-style: none }
.slice-function ul li,
.slice-customer ul li{ padding: 5px; border-bottom: 1px #000 dotted }
.slice-function ul li:last-child,
.slice-customer ul li:last-child{ border-bottom: 0; cursor: pointer }
.slice-function ul li:hover,
.slice-customer ul li:hover{ color: red; cursor: pointer }


.slice-login ul{ list-style: none; padding: 0; margin: 0 }

/** page content **/
#page-content { float: right; margin-top: 7px}
#page-content > .content { 
    float: left; 
    margin-right: 7px; 
    width: 605px;
    text-align: left; 
}
#page-content > .right { float: right; width: 182px;}

/** content box **/
.content-box { width: 100%; margin-bottom: 7px; }
.content-box .title { 
    width: 100%;  
    border-bottom: 2px #f0f0f0 dotted;
    height: 26px;     
}
.content-box .title div.label { 
    color: white;
    font-weight: bold;
    background-color: #020ea8;
    height: 26px;
    float: left;
    padding-top: 2px;
    padding-left: 10px;
    padding-right: 10px;
}
.content-box .title div.end-title { 
    background-image: url('../images/right_title_content.png');
    background-repeat: no-repeat;
    height: 27px;
    width: 30px;
    float: left;
    padding-top: 3px;
}
.content-box .box-content { clear: both; }
.box-product .list-product { text-align: left; clear: both; }
.box-product .list-product .item { 
    float: left; 
    margin: 6px; 
    padding: 10px;
    height: 155px;
    text-align: center;
    border: 1px #f0f0f0 solid;
}
.box-product .list-product .item img { height: 135px; width: 165px; }

.box-news .list-news{ 
    clear: both;    
}
.box-news .list-news .item {
    float: left;
    width: 302px;
    height: 170px;
}
.box-news .list-news .item .image {  float: left; width: 150px; }
.box-news .list-news .item .description { 
    float: left;  
    width: 140px;
    text-align: justify;
}


/** FOOTER **/
#footer { border-top: 1px solid #f0f0f0; margin-top: 20px; padding: 10px;
    text-align: left;
}
#footer .left { float: left;}
#footer .right  { float: right; text-align: right;}

.box-static .static-content { 
    clear: both; 
    margin: 10px 0; 
    text-align: left;
}

.page-product .list-product .item { 
    clear: both; 
    margin: 10px;
    border-bottom: 1px #F0F0F0 dotted; 
}
.page-product .list-product .item:last-child { border-bottom: 0 #F0F0F0 dotted;  }

.page-product .list-product .item .image{ margin: 10px; width: 150px; float: left; } 
.page-product .list-product .item .short-description { float: left;  }
.page-product .list-product .item .short-description h3 { padding: 0; margin: 0; }

.product-detail .image {  float: left; margin-right: 10px;}
.product-detail .description { float: left; }
.product-detail .detail { clear: both; }

.list-news-content { clear: both; }
.list-news-content .item { float: left; width: 300px; margin-right: 2px; height: 170px;}
.list-news-content .item .image { width: 135px; float: left; margin-right: 5px; }
.list-news-content .item .description { float: left; width: 150px; text-align: justify; }

.detail-customer-content ul.customer-info { list-style: none; margin: 0; padding: 0; }
.detail-customer-content .table-video { margin-top: 10px; }
.detail-customer-content .video { border: 2px solid #e2ecf7; height: 298px;}
.detail-customer-content ul.list-video { list-style: none; margin: 0; padding: 0; }
.detail-customer-content ul.list-video a:hover { color: black;  }
.detail-customer-content ul.list-video a li { 
    background-color: #c6c6d0; 
    margin-bottom: 3px;
    padding: 5px 10px; 
    -moz-border-radius: 0 15px 15px 0;
    border-radius: 0 15px 15px 0;
}
.detail-customer-content ul.list-video a li:hover,
.detail-customer-content ul.list-video a li.active { 
    background-color: #eedac9;
}

.news-list .list-candidate-content .item { border-bottom: 1px dotted #F0F0F0; padding-bottom: 10px; }
.news-list .list-candidate-content .item:last-child { border: 0; } 

#frmContact .row { clear: both; text-align: left; height: 30px; }
#frmContact .row .label { float: left; width: 150px; }
#frmContact .row .value { float: left; width: 250px; }
#frmContact .row .value input[type=text] { width: 250px; }

input[type=button],
input[type=submit],
input[type=reset] { background-color: #010884; color: white; padding: 5px 10px; } 

input[type=text], 
input[type=password] { border: 1px solid #dfeaf6; height: 22px; }
textarea { border: 1px solid #dfeaf6;  }

/** show error in form **/
input[type=text].error,
input[type=password].error { background-color: #f6cac8 ;  }
textarea.error { background-color: #f6cac8 ; }

.flash-message { 
    color: green; 
    background-color: #dfdfdf; 
    border: 1px solid #f0f0f0; 
    padding: 5px;
    margin: 3px 0; 
}
.flash-message.error { color: red; }


/** format for login **/
#frmLogin {  }
#frmLogin input[type=text],
#frmLogin input[type=password] { width: 96%; }
#frmLogin .button-set { text-align: right; margin-right: 3%;}

.user-login-content{ }
.user-login-content #frmLogin { width: 300px; margin-left: 150px; margin-top: 30px; }

/** registry **/
.user-registry .user-registry-content { margin-top: 30px; }
.user-registry .user-registry-content .row { clear: both; height: 30px;}
.user-registry .user-registry-content .row .label, 
.user-registry .user-registry-content .row .value{ float: left; }
.user-registry .user-registry-content .row .value input[type=text],
.user-registry .user-registry-content .row .value input[type=password] { width: 300px; }
.user-registry .user-registry-content .row .label { width: 150px; }
.user-registry .user-registry-content .row.button-set { margin-left: 148px; }

.user-registry .user-registry-content label.error { color: red; margin-left: 10px; }

/** show error **/
.row.error { color: red; }

.slice-support .slice-support-content { padding: 5px 5px; }

.slice-function .slice-function-content ul li.active a { color: red; }

/** show table list task **/
.box-task .box-task-content table.list-task{ 
    width: 100%;
    border-collapse: collapse;    
}
.box-task .box-task-content table.list-task th { 
    font-weight: bold; 
    background-color: #e6eef8; 
}
.box-task .box-task-content table.list-task th,
.box-task .box-task-content table.list-task td {
    border: 1px solid #f0f0f0;
    padding: 3px;
}
.box-task .box-task-content table.list-task tr:nth-child(2n+1){
    background-color: #f7ffff;
}

/** Pagination **/
.pagination-list { text-align: right; margin-top: 10px;}
.pagination-list a { padding: 2px 5px; border: 1px solid #f0f0f0;}
.pagination-list strong { padding: 2px 5px; border: 1px solid #f0f0f0; background-color: #e5eef8; }   


/** Detail user **/
#frmEditUserDetail input[type=text],
#frmChangePassword input[type=password] { width: 250px; }

#customer-info ul{ margin: 0; padding: 0; list-style: none; line-height: 25px;}
#customer-info h3 { margin: 0; padding: 0; }

#other-customers { border: 1px solid #f0f0f0; }

#list-categories { background-color: #f0f0f0;  }
#list-categories ul { margin: 0; padding: 0; list-style: none; line-height: 25px; }
#list-categories ul li { background-color: #f0f0f0; padding: 3px 5px;
    border-bottom: 1px solid white; 
    cursor: pointer;
}
#list-categories ul li:hover,
#list-categories ul li.active { 
    background-color: #ead5bb;
}

#other-customers li.item-customer { cursor: pointer; }

/** TOP MENU **/
ul.topnav {
	list-style: none;
	/*padding: 0 20px;*/
	margin: 0;
	float: left;
	/*width: 920px;*/
	/*background: #222;*/
	/*background: url(topnav_bg.gif) repeat-x;*/
}
ul.topnav li {
	float: left;
	margin: 0;
	/*padding: 0 15px 0 0;*/
	position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
	/*padding: 10px 5px;*/
	color: #fff;
	display: block;
	text-decoration: none;
	float: left;
}
ul.topnav li a:hover{
	background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span {
    background: url('../images/menu-arrow2.png') no-repeat center top;
}
ul.topnav li.active span,
ul.topnav li:hover span { /*--Drop down trigger styles--*/
	width: 17px;
	height: 26px;
	float: left;
    margin-top: -6px;
    margin-left: 10px;
	/*background: url(subnav_btn.gif) no-repeat center top;*/
    background: url('../images/menu-arrow.png') no-repeat center top;
}
ul.topnav li span.subhover {
    /*background-position: center bottom; cursor: pointer;*/
} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
    margin: 0;
    padding: 0;
	list-style: none;
    display: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: -5px; 
    top: 30px;
	background: #4A84CA;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
	border: 1px solid #f0f0f0;
    z-index: 999;
}
ul.topnav li ul.subnav li{
	margin: 0; 
    text-align: left;
    padding: 4px 5px;
	border-bottom: 1px solid #f0f0f0; /*--Create bevel effect--*/
	clear: both;
	width: 160px;
}
ul.topnav li ul.subnav li:hover,
ul.topnav li ul.subnav li.active {
    background-color: #0314C8;
}
html ul.topnav li ul.subnav li a {
	float: left;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	
}